<template>
	<div :style="{ minWidth: minWidth }" class="mk-datetime-div">
		<el-date-picker v-model="dateValue" type="datetime" :disabled="!props.isEdit" value-format="YYYY-MM-DD HH:mm:ss"
			:shortcuts="shortcuts" />
		<div class="parent-div">
			<DateNumberInput ref="YYYYRef" v-model="YYYY" @onOK="onYYYYinput" :length=4 :min=1900 :max=3000
				:editable="props.isEdit" />
			<div type="text" class="input-box fixed-width">-</div>
			<DateNumberInput ref="MMRef" v-model="MM" @onOK="onMMinput" :min=1 :max=12 :editable="props.isEdit" />
			<div type="text" class="input-box fixed-width">-</div>
			<DateNumberInput ref="DDRef" v-model="DD" @onOK="onDDinput" :min=1 :max=31 :editable="props.isEdit" />
			<div type="text" class="input-box fixed-width"> </div>
			<DateNumberInput ref="HHRef" v-model="HH" @onOK="onHHinput" :min=0 :max=23 :editable="props.isEdit" />
			<div type="text" class="input-box fixed-width">:</div>
			<DateNumberInput ref="mmRef" v-model="mm" @onOK="onmminput" :min=0 :max=59 :editable="props.isEdit" />
			<div type="text" class="input-box fixed-width" v-show="!props.hideSecond">:</div>
			<DateNumberInput ref="ssRef" v-model="ss" :min=0 :max=59 v-if="!props.hideSecond" @onOK="onssinput"
				:editable="props.isEdit" />
			<div v-if="props.hideSecond" style="width: 20px;"></div>
		</div>
	</div>
</template>

<script lang="ts" setup>
// 支持友好手动输入的日期时间选择器
import { clog, isNull } from '/@/utils';
import DateNumberInput from './components/DateNumberInput.vue';

defineOptions({
	name: 'MkDateTime'
})

const props = defineProps({
	modelValue: {
		// 修正类型转换问题
		type: ([Date, String] as unknown) as () => Date | string | undefined,
		default: ''
	},
	isEdit: {
		type: Boolean,
		default: true
	},
	hideSecond: {
		type: Boolean,
		default: true
	},
	minWidth: {
		type: String,
		default: '230px'
	}
})

const emit = defineEmits(['update:modelValue', 'keyup-enter', "onOK", "onBlur"])

const shortcuts = [
	{
		text: '今天0点',
		value: () => {
			const date = new Date()
			date.setHours(0)
			date.setMinutes(0)
			date.setSeconds(0)
			date.setMilliseconds(0)
			return date
		},
	},
	{
		text: '今天24点',
		value: () => {
			const date = new Date()
			date.setHours(23)
			date.setMinutes(59)
			date.setSeconds(59)
			date.setMilliseconds(999)
			return date
		},
	},
	{
		text: '昨天',
		value: () => {
			const date = new Date()
			date.setDate(date.getDate() - 1)
			date.setHours(0)
			date.setMinutes(0)
			date.setSeconds(0)
			date.setMilliseconds(0)
			return date
		},
	},
	{
		text: '七天前',
		value: () => {
			const date = new Date()
			date.setDate(date.getDate() - 7)
			date.setHours(0)
			date.setMinutes(0)
			date.setSeconds(0)
			date.setMilliseconds(0)
			return date
		},
	},
	{
		text: '月初',
		value: () => {
			const date = new Date()
			date.setDate(1)
			date.setHours(0)
			date.setMinutes(0)
			date.setSeconds(0)
			date.setMilliseconds(0)
			return date
		},
	},
	{
		text: '年初',
		value: () => {
			const date = new Date()
			date.setMonth(0)
			date.setDate(1)
			date.setHours(0)
			date.setMinutes(0)
			date.setSeconds(0)
			date.setMilliseconds(0)
			return date
		},
	},
]

const toInt = (val: string) => {
	const num = parseInt(val, 10);
	return num;
}

/** 从每个输入框获取到值，返回给 dateValue*/
const getValue = () => {
	//解决输入00的时候el-date-picker出错的问题
	const yyv = toInt(YYYY.value) < 1000 ? YYYY.value.padEnd(4, '0') : YYYY.value
	const mmv = toInt(MM.value) > 0 && toInt(MM.value) < 13 ? MM.value.padStart(2, '0') : '01'
	const ddv = toInt(DD.value) > 0 && toInt(DD.value) < 31 ? DD.value.padStart(2, '0') : '01'
	const hhv = toInt(HH.value) > 0 && toInt(HH.value) < 24 ? HH.value.padStart(2, '0') : '00'
	const mmv2 = toInt(mm.value) > 0 && toInt(mm.value) < 60 ? mm.value.padStart(2, '0') : '00'
	const ssv = toInt(ss.value) > 0 && toInt(ss.value) < 60 ? ss.value.padStart(2, '0') : '00'

	const dt = `${yyv}-${mmv}-${ddv} ${hhv}:${mmv2}:${ssv}`

	dateValue.value = dt
}
/** 获取到年月日时分秒 回写到6个输入框中 */
const setValue = (value: string) => {
	if (!isNull(value)) {
		YYYY.value = value.slice(0, 4)
		MM.value = value.slice(5, 7)
		DD.value = value.slice(8, 10)
		HH.value = value.slice(11, 13)
		mm.value = value.slice(14, 16)
		ss.value = value.slice(17, 19)
	} else {
		YYYY.value = ''
		MM.value = ''
		DD.value = ''
		HH.value = ''
		mm.value = ''
		if (props.hideSecond) {
			ss.value = '00'  // 隐藏了秒就默认值为0
		} else {
			ss.value = ''
		}
	}
}

const YYYYRef = ref()
const MMRef = ref()
const DDRef = ref()
const HHRef = ref()
const mmRef = ref()
const ssRef = ref()

const YYYY = ref('01')
const MM = ref('01')
const DD = ref('01')
const HH = ref('00')
const mm = ref('00')
const ss = ref('00')


watch(() => props.modelValue, (newValue) => {
	setValue(newValue as string)
}, { immediate: true })

// v-model的值
const dateValue = useVModel(props, 'modelValue', emit)
//输入的时候响应
const onYYYYinput = () => {
	getValue()
	MMRef.value.focus()
}

const onMMinput = () => {
	getValue()
	DDRef.value?.focus()
}

const onDDinput = () => {
	getValue()
	HHRef.value?.focus()
}

const onHHinput = () => {
	getValue()
	mmRef.value?.focus()
}

const onmminput = () => {
	getValue()
	ssRef.value?.focus()
}

const onssinput = () => {
	getValue()
}

defineExpose({ setValue })

/*
使用举例:
<MkDateTime ref="mkDateTimeRef" v-model="dateValue" minWidth="100%" />
*/
</script>

<style lang="scss" scoped>
.mk-datetime-div {
	width: 100% !important;
	position: relative;
	min-width: var(minWidth);

	:deep(.el-input__inner) {
		color: white !important;
		-webkit-text-fill-color: white !important;
	}

	:deep(.el-input) {
		width: 100% !important;
	}
}

.parent-div {
	position: absolute;
	display: flex;
	width: 136px;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	background-color: transparent;
	border: 0px;
	margin: 1px 0px 0px 25px;
	align-items: center;
}

.input-box {
	flex: 1;
	min-width: 0;
	text-align: center;
	border: 0px solid #ccc;
	/* 允许输入框缩小到0 */
	/* 所有输入框平均分配父div的宽度 */
	/* 如果需要按照固定比例分配，可以设置flex属性为具体的数值，例如flex: 2; */
	/* 也可以通过border和padding等属性调整输入框的样式 */
}

.fixed-width {
	flex: 0 0 3px;
	/* 固定宽度的输入框，这里设置为200px */
}

.input-box:nth-child(1) {
	flex: 2;
}

.input-box:nth-child(3) {
	flex: 1;
}

.input-box:nth-child(5) {
	flex: 1;
}

.input-box:nth-child(7) {
	flex: 1;
}

.input-box:nth-child(9) {
	flex: 1;
}
</style>